$header-icon-size: theme('spacing.4');
$header-button-size-mobile: $mobile-nice-padding;
$header-button-size: theme('spacing.8');

.c-sf-block {
  @include guide-line-active();
  @include guide-line-nested();
  flex: 1 1 auto;
  margin-top: $block-margin-vertical;
  margin-inline-start: $block-margin-horizontal;
}

.c-sf-block__header {
  display: flex;
  align-items: center;
  min-height: 30px;

  &--collapsible {
    cursor: pointer;
  }

  &__title {
    @apply w-label-2;
    display: inline-block;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &__icon {
    color: theme('colors.primary.DEFAULT');
    width: $header-button-size-mobile;
    height: $header-button-size-mobile;
    padding: theme('spacing.[0.5]');
    margin-inline-start: calc(-1 * $header-button-size-mobile / 2);
    transition: color $hover-transition-duration ease-in-out;

    @include media-breakpoint-up(sm) {
      width: $header-button-size;
      height: $header-button-size;
      padding: theme('spacing.2');
      margin-inline-start: calc(-1 * $header-button-size / 2);
    }

    @media (forced-colors: active) {
      color: inherit;
    }
  }
}

.c-sf-block__header__divider {
  @include guide-line-horizontal();
  flex: 1;
  margin-inline-start: theme('spacing.5');
  margin-inline-end: theme('spacing.5');
}

.c-sf-block__type {
  @apply w-label-2;
  overflow-x: hidden;
  text-overflow: ellipsis;

  // Hide the block type if we are showing the title (in collapsed mode).
  .c-sf-block__header__title:not(:empty) + & {
    display: none;
  }
}

.c-sf-block__content {
  @include guide-line-vertical();

  &-inner {
    padding-top: $content-padding-vertical;
    padding-inline-start: $content-padding-horizontal;
  }
}

.c-sf-block__actions {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow-x: hidden;
  // Add additional invisible padding for a more forgiving hover area.
  padding: theme('spacing.4');
  margin: calc(-1 * theme('spacing.4'));

  &__cue,
  &__single {
    display: inline-grid;
    justify-items: center;
    align-items: center;
    width: $header-button-size-mobile;
    height: $header-button-size-mobile;

    @include media-breakpoint-up(sm) {
      width: $header-button-size;
      height: $header-button-size;
    }
  }

  &__single {
    appearance: none;
    border: 0 none;
    background: none;
    cursor: pointer;
    color: theme('colors.primary.DEFAULT');
    opacity: 1;
    border-radius: theme('borderRadius.full');
    line-height: 1;
    font-size: $action-font-size;
    text-align: center;
    padding: 0;

    &:not(:last-of-type) {
      margin-inline-end: 3px;
    }

    &:focus,
    &:hover {
      background-color: $color-grey-5;

      @media (forced-colors: active) {
        border: 1px solid currentColor;
      }
    }

    &[disabled] {
      color: $color-grey-3;
      cursor: not-allowed;
      // Counter hover styles.
      background-color: transparent;

      @media (forced-colors: active) {
        color: GrayText;
      }
    }
  }

  // The cue is meant to be displayed on top of a real button.
  &__cue {
    position: absolute;
    visibility: hidden;
  }

  @media (hover: hover) {
    // Hiding with opacity only, so the elements can still be focused.
    > * {
      opacity: 0;
    }

    &__cue {
      opacity: 1;
      visibility: visible;
    }

    .c-sf-block__header:is(:hover, :focus-within) & {
      > * {
        opacity: 1;
      }

      // The cue should be fully hidden, not just transparent.
      .c-sf-block__actions__cue {
        visibility: hidden;
      }
    }
  }

  svg.icon {
    width: $header-icon-size;
    height: $header-icon-size;
    vertical-align: middle;
  }
}
